<script setup lang="ts">
import {ref} from "vue";
const baseUrlImg = process.env.VUE_APP_BASE_API + "/swagger-ui/index.html"
const url = '/admin/hrdpCommFile/filePreview?fileId='
import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficePptx from '@vue-office/pptx'
const visible = ref(false);

const title = ref("预览");
const fileUrl = ref('https://example.com/file.pdf')
const fileName = ref('https://example.com/file.pdf')
const isOpen = (fileId: any, name: any) => {
  fileUrl.value = baseUrlImg + url + fileId;
  fileName.value = name;
  visible.value = true;
  console.log(fileId,name);
};
const cancel = () => {
  visible.value = false;
}
const isClose = () => {
  visible.value = false;
};
const pdfViewer = ref<any>(null);
// 缩放比例
const scale = ref(1.0),
  minScale = ref(0.5),
  maxScale = ref(3.0),
  scaleStep = ref(0.25)
const zoomIn = () => {
  if (scale.value < maxScale.value) {
    scale.value += scaleStep.value
  }
};
const zoomOut = () => {
  if (scale.value > minScale.value) {
    scale.value -= scaleStep.value
  }
};
const fitWidth = () => {
  const container = pdfViewer.value.$el.parentElement
  const pdfWidth = pdfViewer.value.$el.scrollWidth
  scale.value = container.clientWidth / pdfWidth
};
const fitAuto = () => {
  scale.value = 1.0
};
// // 对外暴露
defineExpose({
  isOpen,
  isClose,
});
</script>

<template>
  <div class="pdf-container">
    <el-dialog
      v-model="visible"
      :title="title"
      class="send-message-dialog"
      width="1122"
      :before-close="cancel"
      :destroy-on-close="true"
    >
      <!--      <div class="pdf-toolbar">-->
      <!--        <eva-button @click="zoomOut">缩小</eva-button>-->
      <!--        <span>{{ (scale * 100).toFixed(0) }}%</span>-->
      <!--        <eva-button @click="zoomIn">放大</eva-button>-->
      <!--        <eva-button @click="fitWidth">适合宽度</eva-button>-->
      <!--        <eva-button @click="fitAuto">自动适应</eva-button>-->
      <!--      </div>-->
      <vue-office-docx v-if="fileName?.toLowerCase().endsWith('.doc') || fileName?.toLowerCase().endsWith('.docx')" :src="fileUrl" style="height: 80vh;"/>
      <vue-office-excel v-if="fileName?.toLowerCase().endsWith('.xls') || fileName?.toLowerCase().endsWith('.xlsx')" :src="fileUrl" style="height: 80vh;"/>
      <vue-office-pdf v-if="fileName?.toLowerCase().endsWith('.pdf')" :src="fileUrl" style="height: 80vh;"/>
      <Vue-office-pptx v-if="fileName?.toLowerCase().endsWith('.ppt')" :src="fileUrl" style="height: 80vh;"/>
      <img v-if="fileName?.toLowerCase().endsWith('.png') || fileName?.toLowerCase().endsWith('.jpg')" width="100%" :src="fileUrl"/>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
::v-deep(.vue-office-pdf-wrapper){
  padding: 0px 0px !important;
  background-color: #fff !important;
}
::v-deep(.docx-wrapper){
  padding: 0px 0px;
  background-color: #fff;
}
::v-deep(.docx-wrapper>section.docx){
  box-shadow: none;
}
//.pdf-container {
//  overflow: auto;
//  width: 100%;
//  height: 100%;
//}
.pdf-toolbar {
  position: sticky;
  top: 0;
  background: white;
  padding: 10px;
  z-index: 100;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: none;
}
.pdf-toolbar button {
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}
</style>
